<template>
  <pubChunk v-if="list.length&&showOpen" class="globalContrastOpen">
    <div slot="title">已选列表（{{list.length}}）</div>
    <i slot="headLeft" class="pointer el-icon-close" @click="showOpen=false"></i>
    <div class="content">
      <p class="flex-hc-sb" v-for="(item, i) in list" :key="i">
        <span class="name tof">【{{typeList[item.contrastObj.type-1]}}】{{item.contrastObj.name}}</span>
        <i class="pointer el-icon-close" @click="closeItemHandle(i, item.contrastObj)"></i>
      </p>
    </div>
    <template slot="footer">
      <div class="pubChunk_footer">
        <el-button size="small" @click="clearListhandle">清空</el-button>
        <el-button size="small" type="primary" @click="contrastHandle">对比</el-button>
      </div>
    </template>
  </pubChunk>
</template>

<script>
import pubChunk from '@/components/investComn/pubChunk.vue'
import { randomNum } from '@/utils/pro'

export default {
  components: { pubChunk },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      typeList: ['策略', '分类', '组合'],
      showOpen: true, 
    }
  },
  methods: {
    closeItemHandle(i, obj) {
      this.$store.commit('contrast/removeContrastList', i)
    },
    clearListhandle() {
      this.$confirm('确认清空对比列表？', '提示', {
        type: 'warning'
      }).then(_ => {
        this.$store.commit('contrast/clearContrastList')
      }).catch(_ => {})
    },
    contrastHandle() {
      if(this.list.length<2) {
        this.$message({
          type: 'warning',
          message: '请先勾选列表中2条以上策略',
          duration: 2000
        })
        return false
      }
      if(this.list.length>20) {
        this.$message({
          type: 'warning',
          message: '对比策略不得多于20条',
          duration: 2000
        })
        return false
      }
      const res_list = this.list.map(item => {
        return {
          ...item.contrastObj
        }
      })
      this.$store.commit('contrast/clearContrastList')
      const id = randomNum(6)
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.globalContrastOpen {
  z-index: 1000;
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 400px;
  height: 480px;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px 0px rgba(4, 14, 46, 0.1);
  border-radius: 4px;
  border: 1px solid #D9D9D9;
  .content {
    p {
      height: 30px;
      padding: 0 8px;
      background: rgba(236, 241, 246, 0.5);
      border-radius: 2px;
      & + p { margin-top: 4px; }
      &:hover {
        color: #1890FF;
      }
      .name {
        width: 300px;
      }
    }
  }
  .pubChunk_footer {
    padding: 0 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>